<template>
  <el-drawer
    class="drawer-point"
    :modal-append-to-body="false"
    :modal="false"
    :size="200"
    :wrapperClosable="false"
    :withHeader="false"
    :visible.sync="isShow"
    @closeDrawer="handleClose"
    direction="btt">
      <i class="el-icon-full-screen" @click="$emit('show', options)"></i>
      <v-chart v-loading="loading" :option="options" :autoresize="true" style="height:200px;width:100%;"></v-chart>
  </el-drawer>
</template>
<script>
export default {
  data(){
    return {
      isShow: false,
      loading: false,
      options: {},
      params:{},
    }
  },
  methods:{
    init(params){
      this.params = params,
      this.isShow = true;
      this.loading = true;
      this.$request('post', '/lionbay/get_point_series', params, (data,msg) => {
        this.getOptions(data);
        this.loading = false;
      },msg => {

      }, {}, 'all')
    },
    handleClose(){
      this.params = {},
      this.options = {};
      this.loading = false;
    },
    getOptions(res){
      console.log(res);
      this.options = {
        title: {
          text: `点位(${this.params.map_lat.substring(0,8)},${this.params.map_lon.substring(0,8)})近10年（${res.titles}均值变化`,
          left: 'center',
          top: 20,
          textStyle: {
            fontFamily: 'AlibabaPuHuiTi-Bold',
            color: '#000',
            fontSize: 12,
          }
        },
        grid: {
          top: 100,
          left: 30,
          right: 30,
          bottom: 70,
          containLabel: true
        },
        legend: {
          bottom: 5,
          data: [res.field],
          textStyle: {
            fontSize: 12,
            fontFamily: 'AlibabaPuHuiTi-Regular',
            color: '#000'
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: res.xValue,
          axisTick: {
            alignWithLabel: true
          },
          axisLabel: {
            rotate: 45,
            fontFamily: 'AlibabaPuHuiTi-Regular',
            color: '#000',
            fontSize: 14,
          }
        },
        yAxis: {
          type: 'value',
          // minInterval: 1,
          // splitNumber: 4,
          axisLabel: {
            fontFamily: 'AlibabaPuHuiTi-Regular',
            color: '#000',
            fontSize: 14,
          }
        },
        series: [
          {
            type: 'line',
            data: res.Values,
            lineStyle: {
              color: '#5470c6',
            },
            itemStyle: {
              color: '#5470c6',
            }
          },
        ]
      };
    }
    
  }
}
</script>
<style lang="scss" scope>
.drawer-point{
  width:400px;height:200px;left:20px;bottom:240px;top:auto;
  .el-icon-full-screen{position:absolute;top:10px;right:10px;z-index:10;cursor:pointer;}
}
</style>